<template>
  <!-- 标签 -->
  <div class="opacity-80 w-full p-5 mb-3 transition-all duration-300 hover:shadow-[0_2px_2px_3px_#33333333] bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
    <!-- 标签标题 -->
    <h2 class="blog-font-cute mb-2 font-bold text-gray-900 uppercase dark:text-white">标签云</h2>
    <!-- 标签列表 -->
    <span v-for="(item, index) in tags" :key="item.id"
      class="inline-block mb-1 cursor-pointer transition-all duration-300 bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-green-200 hover:text-green-900 dark:bg-green-900 dark:text-green-300">
      {{ item.name }}
    </span>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getTags } from '@/api/frontend/tag';

const tags = ref([])
getTags().then((res)=>{
  tags.value = res.data
})
</script>

<style scoped></style>